<template>
    <el-drawer v-model="drawer" title="用户详情" :direction="direction" :before-close="handleClose" size="1100">
        <div style="display: flex;">
            <el-image style="width: 60px;height: 60px; margin-right: 16px;">
            </el-image>
            <el-descriptions>
                <p></p>
                <el-descriptions-item label="余额:">kooriookami</el-descriptions-item>
                <el-descriptions-item label="总计订单:">18100000000</el-descriptions-item>
                <el-descriptions-item label="总计消费金额:">Suzhou</el-descriptions-item>
                <el-descriptions-item label="积分:">Suzhou</el-descriptions-item>
                <el-descriptions-item label="本月订单:">Suzhou</el-descriptions-item>
                <el-descriptions-item label="本月消费金额:">Suzhou</el-descriptions-item>
            </el-descriptions>
            <el-button type="primary" style="margin-left: 35px;">编辑</el-button>
        </div>
        <el-tabs type="border-card">
            <el-tab-pane label="User">User</el-tab-pane>
            <el-tab-pane label="Config">Config</el-tab-pane>
            <el-tab-pane label="Role">Role</el-tab-pane>
            <el-tab-pane label="Task">Task</el-tab-pane>
        </el-tabs>
    </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'
// import { getUserListByIdApi } from '@/api/userList'

const drawer = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure you want to close this?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

// function getUserListById() {
//     getUserListByIdApi({ _id: '68500646b876d536258993bd' }).then(res => {
//         console.log(res);

//     })
// }

</script>

<style>
.el-drawer {
    width: 1100px;
}

.el-drawer__header {
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 0;
    height: 50px;
    padding-top: 0px;
    font-size: 14px;
    line-height: 14px;
}

.el-descriptions {
    width: 82%;
}

.el-descriptions__body .el-descriptions__table .el-descriptions__cell {
    font-size: 13px;
    color: #17233d;
}

.el-drawer__body {
    padding: 20px, 0, 0, 0;
}
</style>